<template>
    <div class="Documents">
        <div class="widgets bg-white">
            <el-form :inline="true" :model="readerRowData" ref="readerRowForm" size="mini" class="operatorForm">
                <el-form-item label="用户名：" prop="userName">
                    <el-input v-model="readerRowData.userName" readonly></el-input>
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                    <el-input v-model="readerRowData.name" readonly></el-input>
                </el-form-item>
                <el-form-item label="单据：" prop="documentName">
                    <el-input v-model="documentName" readonly></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="tree-left">
            <div class="tree-left-title">单据名称</div>
            <el-tree :data="treeData" ref="treeBox" :default-expand-all="true" :accordion="false" node-key="id" :expand-on-click-node="false" :default-expanded-keys="dfExpKey" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true"></el-tree>
        </div>
        <div class="tree-right">
            <div class="documentsPermissions">
                <div class="documentsPermissions-left-title">单据权限</div>
                <div class="documentsPermissions-content">
                    <ul>
                        <li><el-checkbox v-model="voucherChecked">可制单</el-checkbox></li>
                        <li><el-checkbox v-model="auditChecked">可审核</el-checkbox></li>
                        <li><el-checkbox v-model="printChecked">可打印</el-checkbox></li>
                        <li><el-checkbox v-model="importChecked">可导出</el-checkbox></li>
                        <li><el-checkbox v-model="emailChecked">可发邮件</el-checkbox></li>
                        <li><el-checkbox v-model="qqChecked">可发QQ</el-checkbox></li>
                        <li><el-checkbox v-model="watchChecked">可发微信</el-checkbox></li>
                        <li><el-checkbox v-model="invalidChecked">可作废</el-checkbox></li>
                        <li><el-checkbox v-model="generateChecked">可生成</el-checkbox></li>
                    </ul>
                </div>
            </div>
            <div class="fieldPermissions">
                <div class="fieldPermissions-left-title">字段权限</div>
                <div class="fieldPermissions-content">
                    <div class="table top-bottom bj">
                        <el-scrollbar style="height: 100%;">
                            <el-table :data="fieldPermissionsRow">
                                <el-table-column property="id" label="编码"></el-table-column>
                                <el-table-column property="receiptsField" label="字段名称"></el-table-column>
                                <el-table-column property="visible" label="可见">
                                    <template slot-scope="scope">
                                        <el-checkbox v-model="scope.row.visible" checked v-if="scope.row.tagged == 0 || scope.row.tagged == 1"></el-checkbox>
                                        <el-checkbox v-model="scope.row.visible" v-else></el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column property="revisability" label="可修改">
                                    <template slot-scope="scope">
                                        <el-checkbox v-model="scope.row.revisability" checked v-if="scope.row.tagged == 1"></el-checkbox>
                                        <el-checkbox v-model="scope.row.revisability" v-else></el-checkbox>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
            <div class="document-btn">
                <div class="btn-left">
                    <el-button type="info" class="btn-emptyCurrent">清空当前</el-button>
                    <el-button type="info" @click="removeCheckAll" class="btn-emptyAll">清空所有</el-button>
                </div>
                <div class="btn-right">
                    <el-button type="warning" @click="checkAll" class="checkAll">全选</el-button>
                    <el-button type="primary" class="save" @click="saveRow">保存</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            systemId: this.$store.state.systemId,
            userId: this.$store.state.userManagementStore.userId,
            selectRowId: this.$store.state.userManagementStore.selectRowId[0],
            treeData: this.$store.state.userManagementStore.documentsTreeData,//树形数据
            defaultProps: {                         //树形子类
                children: 'submenuList',
                label: 'name'
            },
            readerRowData:{                         //存储授权数据
                userName: this.$store.state.userManagementStore.userName[0],
                name: this.$store.state.userManagementStore.name[0]
            },
            documentName: '',                       //单据名称
            voucherChecked: true,
            auditChecked: true,
            printChecked: true,
            importChecked: true,
            emailChecked: true,
            qqChecked: true,
            watchChecked: true,
            invalidChecked: true,
            generateChecked: true,
            dfExpKey: [],                           //第一个数节点id
            fieldPermissionsRow: this.$store.state.userManagementStore.documentsTableData,//字段授权的表格数据
            // isIndeterminate: true,
            // checkedCities: [],
            // checkedCitiesId: [],
            // checkAll: false,
        }
    },
    watch:{
        treeData() {
			this.$nextTick(() => {
				let documentNodeId = this.$store.state.userManagementStore.documentNodeId;
				this.dfExpKey = [documentNodeId];
                this.$refs.treeBox.setCurrentKey(documentNodeId);
                this.documentName = this.treeData[0]['submenuList'][0]['name'];
			});
        },
        fieldPermissionsRow(){
            for(let i = 0;i < this.fieldPermissionsRow.length;i++){
                this.checkedCitiesId.push(this.fieldPermissionsRow[i]['id'])
            }
        }
    },
    methods: {
        handleNodeClick(row) {                                  //点击左侧树形结构触发该方法
            this.documentName = row['name'];
            this.$store.commit('userManagementStore/updateDocumentNodeId', row['id']);
            this.$store.dispatch('userManagementStore/getDocumentsTableData', row['id']);
        },
        checkAll(){//全选
            $('.el-checkbox__input').addClass('is-checked')
            // this.checkedCities = val ? this.checkedCitiesId : [];
            // this.isIndeterminate = false;
        },
        removeCheckAll(){//取消全选
            $('.el-checkbox__input').removeClass('is-checked')
        },
        saveRow(){//保存
            let Arr = this.fieldPermissionsRow.map(obj => {
                if(obj['visible'] == true && obj['revisability'] == true){
                    obj['tagged'] = 1;
                }else if(obj['visible'] == true && (!obj['revisability'] || obj['revisability'] == false)){
                    obj['tagged'] = 0;
                }else{
                    obj['tagged'] = 2;
                }
                return {
                    id: obj['id'],
                    tagged: obj['tagged'],
                    userId: obj['userId']
                }
            });
            let type = {
                headers: {
                    'Content-type': 'application/json;charset=UTF-8'
                }
            }
            this.$http.post(this.$url + 'userManage/updateFieldPermissions',JSON.stringify(Arr),type).then(res => {
                if(res.data.code == 20001){
                    this.$message({message: '保存成功', type: 'success'});
                    setTimeout(() => {
                        let documentNodeId = this.$store.state.userManagementStore.documentNodeId;
                        this.$store.dispatch('userManagementStore/getDocumentsTableData', documentNodeId);
                    });
                }
            })
        }
    },
    mounted(){
        this.$store.commit('userManagementStore/updateDocumentNodeId');
        this.$store.dispatch('userManagementStore/getDocumentsTreeData',this.$url + 'userManage/findReceiptsField');//显示单据树形数据
    }
}
</script>
<style lang="less">
.Documents {
    height: 100%;
    min-width: 810px;
    margin-top: 10px !important;
    .operatorForm{
        background: #fff;
        padding: 8px 0px;
        border-radius: 5px 5px 0px 0px;
        padding-left: 10px;
        margin-top: 0 !important;
        .el-form-item--mini.el-form-item{
            width: auto !important;
            margin-bottom: 0px !important;
            margin-left: 10px;
        }
    }
    .el-input--mini .el-input__inner{
        height: 28px !important;
        line-height: 28px !important;
    }
    .tree-left {
        height: calc(100% - 55px);
        width: 200px;
        background-color: #fff;
        padding: 10px 0;
        box-sizing: border-box;
        border-radius: 6px;
        float: left;
        margin-top: 10px;
        .tree-left-title {
            padding: 0 15px 10px 15px;
            border-bottom: 1px solid #eee;
            font-size: 15px;
            margin-bottom: 10px;
        }
        .el-tree {
            height: calc(100% - 46px) !important;
            overflow: auto !important;
        }
    }
    .tree-right{
        height: calc(100% - 65px);
        width: calc(100% - 215px);
        overflow: hidden;
        float: right;
        padding: 10px 0;
        .documentsPermissions{
            height: 115px;
            width: 100%;
            background-color: #fff;
            padding: 10px 0;
            box-sizing: border-box;
            border-radius: 6px;
            .documentsPermissions-left-title{
                padding: 0 15px 10px 15px;
                border-bottom: 1px solid #eee;
                font-size: 15px;
                margin-bottom: 10px;
            }
            .documentsPermissions-content{
                ul>li{
                    float: left;
                    width: 98px;
                    margin-left: 20px;
                    margin-bottom: 10px;
                    list-style:none;
                }
            }
        }
        .fieldPermissions{
            height: calc(100% - 180px);
            width: 100%;
            background-color: #fff;
            padding: 10px 0;
            box-sizing: border-box;
            border-radius: 6px;
            margin-top: 10px;
            margin-bottom: 10px;
            .fieldPermissions-left-title{
                padding: 0 15px 10px 15px;
                border-bottom: 1px solid #eee;
                font-size: 15px;
            }
            .fieldPermissions-content{
                height: calc(100% - 20px) !important;
                .table {
                    min-width: 650px !important; 
                    .el-table__body-wrapper {
                        overflow-y: auto !important; 
                        height: calc(100% - 70px) !important;
                    }
                    th {
                        text-align: center;
                        font-weight: 500 !important;
                        background: #ebeef5 !important;
                    }
                    td {
                        text-align: center;
                    }
                }
                .table.top-bottom{
                    height: calc(100% - 20px) !important;
                }
            }
        }
        .document-btn{
            .btn-left{
                float: left;
            }
            .btn-right{
                float: right;
            }
        }
    }
}
</style>
